<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        ul {
            display: flex;
            flex-wrap: wrap;
            width: 1200px;
        }
        ul li {
            width: 280px;
            margin: 10px;
            border: 1px solid #000;
            box-sizing: border-box;
            text-align: center;
        }
        ul img {
            width: 100%;
        }

    </style>
</head>
<body>

    <ul id="list">
        <!-- <li>
            <img src="https://img30.360buyimg.com/pop/s1180x940_jfs/t1/201288/25/23710/64955/62f070fdE95cb4f47/22b916d938a43bb5.jpg.avif" alt="">
            <h3>金龙鱼</h3>
            <p>金龙鱼调和油1:1:1</p>
            <strong>9.9</strong>
        </li> -->
        
        
    </ul>
    
    <script>

        // 数组：存储多个同类型的数据
        // 对象：对一类事物的描述  可以存储不同类型的数据

        var arr = [
            {
                imgSrc : 'https://img30.360buyimg.com/pop/s1180x940_jfs/t1/201288/25/23710/64955/62f070fdE95cb4f47/22b916d938a43bb5.jpg.avif' ,
                name : '金龙鱼' ,
                des : '金龙鱼调和油1:1:1' ,
                price : 9.9
            } ,
            {
                imgSrc : 'https://img30.360buyimg.com/pop/s1180x940_jfs/t1/201288/25/23710/64955/62f070fdE95cb4f47/22b916d938a43bb5.jpg.avif' ,
                name : '金龙鱼2' ,
                des : '金龙鱼2调和油1:1:1' ,
                price : 19.9
            } ,
            {
                imgSrc : 'https://img30.360buyimg.com/pop/s1180x940_jfs/t1/201288/25/23710/64955/62f070fdE95cb4f47/22b916d938a43bb5.jpg.avif' ,
                name : '金龙鱼3' ,
                des : '金龙鱼3调和油1:1:1' ,
                price : 29.9
            } 
        ] ;


        // 动态生成li 
        var res = '' ;
        // 遍历数组
        // for(var i = 0 ; i < arr.length ; i++) {
        //     res += '<li>'
        //     // <img src="变量" alt="">
        //     res += '<img src="' + arr[i].imgSrc +  '" alt="">' 
        //     res += '<h3>' + arr[i].name + '</h3>'
        //     res += '<p>' + arr[i].des + '</p>'
        //     res += '<strong>' + arr[i].price + '</strong>'
        //     res += '</li>'
        // }


        for(var i = 0 ; i < arr.length ; i++) {
            res += `
                <li>
                    <img src="${arr[i].imgSrc}" alt="">
                    <h3>${arr[i].name}</h3>
                    <p>${arr[i].des}</p>
                    <strong>${arr[i].price}</strong>
                </li>
            `
        }


        var oUl = document.getElementById('list') ;
        oUl['innerHTML'] = res ;



    </script>

</body>
</html>